<template>
  <div class="add-form">
    <el-dialog :title="titleupdate.text+titleupdate.pageTitle" @close='onclose' :visible="updateshow">
      <el-form
        :rules="ruleInline"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="150px"
        style="width: 80%; margin-left:10px;"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="listfrom.shortName">

          </el-input>

        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="listfrom.company"></el-input>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select
            class="filter-item"
            style="width: 130px;"
            v-model="listfrom.province"
            @keyup.enter="handleFilter"
            @change="handleProvince"
            filterable
          >
            <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select
            class="filter-item"
            style="width: 130px;"
            v-model="listfrom.city"
            @keyup.enter="handleFilter"
            filterable
          >
            <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="listfrom.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入"
            v-model="listfrom.remarks"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- {{updateid}} -->
  </div>
</template>

<script>
import { getlist, update } from '../../api/hmmm//companys'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  props: {
    updateshow: {
      type: Boolean,
      required: true
    },
    titleupdate: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
    updateid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []

      },
      ruleInline: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        // province: [
        //   { required: true, message: '请选择省份', trigger: 'change' }
        // ],
        tags: [{ required: true, message: '请请输标签', trigger: 'blur' }]
      },
      listfrom: []
    }
  },

  created () {
    this.getlist()
    this.getCityData()
    console.log(this.formBase)
  },

  methods: {
    handleFilter () {},
    onclose () {
      this.$emit('closelogin')
    },
    async createData () {
      this.$refs.dataForm.resetFields()
      // 发起编辑请求
      if (this.listfrom.isFamous === 1) {
        this.listfrom.isFamous = true
      } else {
        this.listfrom.isFamous = false
      }
      // this.listfrom.remarks = this.formBase.remarks
      try {
        await update(this.listfrom)
        this.$emit('closelogin')
      } catch (err) {
        console.log(err)
      }
    },
    dialogFormH () {
      this.$emit('closelogin')
      this.$refs.dataForm.resetFields()
    },
    async getlist () {
      const res = await getlist(this.updateid)
      this.listfrom = res.data
      console.log(this.listfrom)
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    }
  }
}
</script>

<style scoped>

</style>
